<template>
    <div class="energyPage">
      <div class="energyLeft">
        <div class="emergencyTab">
          <div
            v-for="(item, index) of areaTabList"
            :key="index"
            :class="{ active: areaTabIndex == index }"
            class="areaTabItem"
            @click="onAreaTabClick(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="header headerGreen">电力设备分布统计</div>
        <div class="monitoringData cleafix">
          <div
            v-for="(item, index) of monitoringData"
            :key="index"
            class="monitoringDataItem"
          >
            <p class="monitoringName">{{ item.name }}</p>
            <p class="monitoringValue">
              {{ item.value }}<span v-if="item.unit">{{ item.unit }}</span>
            </p>
          </div>
        </div>
        <div class="header headerGreen">区域电力设备管理</div>
        <div class="roadTable">
          <dv-scroll-board
            :config="tableConfig"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
      <div class="energyMiddle"></div>
      <div class="energyRight">
        <div class="header headerRed">电力设备状态</div>
        <div class="statusChart">
          <div class="left">
            <dv-active-ring-chart :config="statusChartConfig" style="width: 100%; height: 100%" />
          </div>
          <div class="right">
            <div v-for="(item, index) of statusChartConfig.data" :key="index" class="legendItem">
              <div class="legendColor" :style="{background: item.color}"></div>
              <div class="legendName">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="header headerRed">管区用电消耗情况</div>
        <div class="consume">
          <div class="top">
            <div class="left"></div>
            <div class="right">
              <div class="title"></div>
              <div class="value">
                <dv-digital-flop :config="energyConfig1" style="width:100%;height:100%;" />
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="item">
              <div class="title">居民用电量(千瓦时)</div>
              <div class="value">
                <dv-digital-flop :config="energyConfig2" style="width:100%;height:100%;" />
              </div>
            </div>
            <div class="item">
              <div class="title">居民用电量(千瓦时)</div>
              <div class="value">
                <dv-digital-flop :config="energyConfig3" style="width:100%;height:100%;" />
              </div>
            </div>
          </div>
        </div>
        <div class="header headerGreen">分时用电量统计</div>
        <div class="energyTable">
          <dv-charts :option="eneygyOption" style="width: 100%; height: 100%" />
        </div>
      </div>
    </div>
  </template>
<script>
export default {
  data(){
    function formatter (number) {
      const numbers = number.toString().split('').reverse()
      const segs = []
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
      return segs.join(',').split('').reverse().join('')
    }
    return{
      areaTabList: [
        { name: "朝阳区", index: 0 },
        { name: "海淀区", index: 1 },
        { name: "东城区", index: 2 },
        { name: "西城区", index: 3 },
        { name: "丰台区", index: 4 },
      ],
      areaTabIndex: 0,
      monitoringData: [
        { name: "街道总数", value: 23, unit: "" },
        { name: "设备总控数", value: 1223, unit: "" },
        { name: "巡检次数", value: 34, unit: "" },
        { name: "报警总数", value: 54, unit: "" },
        { name: "已解决数", value: 456, unit: "" },
        { name: "未解决数", value: 89, unit: "" },
      ],
      tableConfig: {
        header: [
          "<span style='text-align:center; color:#6C9BFF'>街道</span>",
          "<span style='text-align:center; color:#6C9BFF'>报警设备</span>",
          "<span style='text-align:center; color:#6C9BFF'>运行状态</span>",
          "<span style='text-align:center; color:#6C9BFF'>控制</span>",
        ],
        rowNum: 9,
        headerBGC: "none",
        oddRowBGC: "none",
        evenRowBGC: "#1a3c70",
        align: ["center", "center", "center"],
        data: [
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E70000'>8</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E4EDFF'>0</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E4EDFF'>0</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E70000'>8</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E70000'>8</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E70000'>8</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E70000'>5</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E4EDFF'>0</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E4EDFF'>0</span>", "开启", ""],
          ["<span style='color:#E4EDFF'>人民路</span>", "<span style='color:#E70000'>8</span>", "开启", ""],
        ],
      },
      statusChartConfig: {
        data: [
          { name: '正常', value: 85, color: '#369ee7' },
          { name: '离线', value: 10, color: '#a7a8a8' },
          { name: '报警', value: 5, color: '#ff854f' },
        ],
        color: ['#369ee7', '#a7a8a8', '#ff854f'],
        radius: 80,
        activeRadius: 85,
        lineWidth: 30
      },
      eneygyOption: {
        legend: {
          data: [
            {
              name: "居民用电",
              color: "#f78605",
            },
            {
              name: "生产用电",
              color: "#f9c78b",
            },
          ],
          textStyle: {
            fontSize: 10,
            fill: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "30%",
        },
        xAxis: {
          data: ["5月", "6月", "7月", "8月", "9月", "10月", "11月"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "居民用电",
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: "bar",
            gradient: {
              color: ["#ffbb3d", "#f78605"],
            },
          },
          {
            name: "生产用电",
            data: [1000, 1230, 1400, 1500, 2500, 3200, 2985],
            type: "bar",
            gradient: {
              color: ["#f9c78b", "#f9c78b"],
            },
          },
        ],
      },
      energyConfig1: {
        number: [3430499],
        formatter,
        style: {
          fill: '#FFC55B'
        }
      },
      energyConfig2: {
        number: [1430499],
        formatter,
        style: {
          fill: '#66D8FF'
        }
      },
      energyConfig3: {
        number: [2030499],
        formatter,
        style: {
          fill: '#66D8FF'
        }
      }
    }
  },
  methods:{
    onAreaTabClick: function (item) {
      this.areaTabIndex = item.index;
    },
  },
  created(){},
  mounted(){}
}
</script>

<style lang="scss" scoped>
@import "../../style//energyConsumption.scss";
</style>
  